﻿
@using Common
@model Param_Strateg
<link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
<link rel="stylesheet" href="/Content/layuiadmin/style/admin.css" media="all">
<div class="layui-fluid">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <form class="layui-form" lay-filter="form" onsubmit="return false">
                    <div class="layui-form-item">
                        <label class="layui-form-label">为该攻略选择一个分类</label>
                        <div class="layui-input-block">
                            <select name="cate" id="cate" lay-verify="required">
                                <option value=""></option>
                                @foreach (var item in (List<Param_StrategType>)ViewBag.Type)
                                {
                                    <option value="@item.STypeID" @(item.STypeID == Model.STypeID ? "selected" : "")>@item.STypeName</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">攻略名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="StrategName" id="StrategName" required lay-verify="required" placeholder="请输入攻略名称" autocomplete="off" class="layui-input" value="@Model.StrategName">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">攻略描述</label>
                        <div class="layui-input-block">
                            <textarea name="describe" id="Describe" lay-verify="Describe" placeholder="请输入攻略描述" class="layui-textarea">@Model.Describe</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">攻略图片</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="test1">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button> <br />
                            <input type="image" src="@(Tools.StrategImg + Model.SImage)" style="max-height:100px;" name="SImage" id="SImage" lay-verify="required" value="@(Model.SImage)" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="Show" id="Show" lay-skin="switch" value="@Model.Show">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn sub" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<script>
    layui.config({
        base: '/Content/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set']);
</script>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/dist/html5ImgCompress.min.js"></script>
<script src="~/Scripts/tools.js"></script>
<script>
        var data = {};
        //Demo
        $(function () {
            var form = layui.form;
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '' //上传接口
                , auto: false//是否自动上传
                , bindAction: "#VBHUJ"
                , multiple: false
                , size: 0 //上传图片大小限制 KB
                , number: 1 //同时上传数量
                , accept: "images" //文件类型
                , acceptMime: 'image/*'
                , choose: function (obj) {
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        //console.log(index); //得到文件索引
                        //console.log(file); //得到文件对象
                        //console.log(result); //得到文件base64编码，比如图片

                        new html5ImgCompress(file, {
                            before: function (file) {
                                console.log('压缩前...');
                                // 这里一般是对file进行filter，例如用file.type.indexOf('image') > -1来检验是否是图片
                                // 如果为非图片，则return false放弃压缩（不执行后续done、fail、complete），并相应提示
                                if (file.type.indexOf('image') == -1) {
                                    layer.msg("图片格式错误", { icon: 5, anim: 6 });
                                    return false;
                                }
                            },
                            done: function (file, base64) {
                                console.log('压缩成功...');
                                //console.log(base64);
                                data.SImage = base64;
                                $("#SImage").attr("src", base64).val(base64);
                                $("#SImage").unbind();
                                $("#SImage").click(function () {
                                    openimg(`${base64}`);
                                    return false;
                                })
                                // ajax和服务器通信上传base64图片等操作
                            },
                            fail: function (file) {
                                console.log('压缩失败...');
                            },
                            complete: function (file) {
                                console.log('压缩完成...');
                            },
                            notSupport: function (file) {
                                console.log('浏览器不支持！')
                                // 不支持操作，例如PC在这里可以采用swfupload上传
                            }
                        });
                        //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                        //这里还可以做一些 append 文件列表 DOM 的操作

                        //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                        //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                    });
                }
                , done: function (res) {
                }
                , error: function () {
                    //请求异常回调
                }
            });

            form.on('submit(form)', function () {
                // 验证均通过后的操作（如 Ajax 提交）
                // …
                data.SImage = $("#SImage").val();
                if (data.SImage == undefined || data.SImage == "") {
                    //console.log(data.SImage);
                    layer.msg("图片不能为空", { icon: 5, anim: 6 });
                    return false;
                }
                var index = layer.load(1, { shade: [0.6, "#fff"] });
                data.StrategName = $("#StrategName").val();
                data.Describe = $("#Describe").val();
                data.Show = $("#Show").prop("checked");
                data.STypeID = $("#cate").val();
                console.log(data);
              
                $.post(apiurl + "api/Strateg/Update/" + @Model.StrategID, data, function (res) {
                    console.log(res);
                    if (res.Code == 200) {
                        setTimeout(() => {
                            layer.close(index);
                            layer.msg("修改成功", { icon: 6, time: 500 });
                            setTimeout(() => {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.location.reload();
                            }, 600)
                        }, 300);
                    }
                    else {
                        layer.msg("修改失败", { icon: 5, anim: 6, time: 500 });
                    }
                })
            });

            //执行实例
            //form.verify({
            //    tname: function (value, item) { //value：表单的值、item：表单的DOM对象
            //        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
            //            return '用户名不能有特殊字符';
            //        }
            //        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
            //            return '用户名首尾不能出现下划线\'_\'';
            //        }
            //        if (/^\d+\d+\d$/.test(value)) {
            //            return '用户名不能全为数字';
            //        }

            //        //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
            //        if (value === 'xxx') {
            //            alert('用户名不能为敏感词');
            //            return true;
            //        }
            //    }

            //    //我们既支持上述函数式的方式，也支持下述数组的形式
            //    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            //    , pass: [
            //        /^[\S]{6,12}$/
            //        , '密码必须6到12位，且不能出现空格'
            //    ]
            //});


        })

</script>

